<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>
        HIUI 前端页面框架 - Table 表格
    </title>
    <meta content="width=device-width, initial-scale=1.0, user-scalable=no, minimum-scale=1.0, maximum-scale=1.0 " name="viewport">
    <meta content="yes" name="apple-mobile-web-app-capable">
    <meta content="black" name="apple-mobile-web-app-status-bar-style">
    <meta content="telephone=no" name="format-detection">
    <link rel="stylesheet" type="text/css" href="../../styles/hiui.css">
    <link rel="stylesheet" type="text/css" href="../../styles/site.css">

<body>
    <% var navName = 'table'; %>
    <%- include('../_parts/_header') %>
    <div class="site-container">
        <div class="site-tree">
            <%- include('../_parts/_nav') %>
        </div>
        <div class="site-content">
            <h3 class="site-title">1. 基础表格<a href="#base">#</a></h3>
            <div class="site-info">
                <table class="table">
                    <caption>基础表格表头</caption>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>地址</th>
                            <th>标签</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% for (let i = 0; i < 3; i++) { %>
                        <tr>
                            <th scope="row">
                                <div class="table-cell">
                                    <%= i + 1 %>
                                </div>
                            </th>
                            <td>
                                <div class="table-cell">姓名
                                    <%= i + 1 %>
                                </div>
                            </td>
                            <td>
                                <div class="table-cell">上海市浦东新区小区
                                    <%= i + 1 %>
                                </div>
                            </td>
                            <td>
                                <div class="table-cell">
                                    <% if (i == 0) { %>
                                    <span class="tag tag-success">董事长</span>
                                    <% } else if (i == 1) { %>
                                    <span class="tag tag-success-outline">助理</span>
                                    <% } %>
                                    <span class="tag tag-primary">总经理</span>
                                </div>
                            </td>
                            <td>
                                <div class="table-cell">
                                    <button class="btn-link">邀请</button>
                                    <button class="btn-link">删除</button>
                                </div>
                            </td>
                        </tr>
                        <% } %>
                    </tbody>
                </table>
                <table class="table">
                    <caption>多级表头</caption>
                    <thead>
                        <tr>
                            <th rowspan="2">编号</th>
                            <th colspan="2">姓名</th>
                            <th rowspan="2">年龄</th>
                            <th rowspan="2">地址</th>
                            <th rowspan="2">标签</th>
                            <th rowspan="2">操作</th>
                        </tr>
                        <tr>
                            <th>名字</th>
                            <th>姓氏</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% for (let i = 0; i < 3; i++) { %>
                        <tr>
                            <th scope="row">
                                <div class="table-cell">
                                    <%= i + 1 %>
                                </div>
                            </th>
                            <td>
                                <div class="table-cell">名
                                    <%= i + 1 %>
                                </div>
                            </td>
                            <td>
                                <div class="table-cell">王
                                    <%= i + 1 %>
                                </div>
                            </td>
                            <th scope="row">
                                <div class="table-cell">2
                                    <%= i + 1 %>
                                </div>
                            </th>
                            <td>
                                <div class="table-cell">上海市浦东新区小区
                                    <%= i + 1 %>
                                </div>
                            </td>
                            <td>
                                <div class="table-cell">
                                    <% if (i == 0) { %>
                                    <span class="tag tag-success">董事长</span>
                                    <% } else if (i == 1) { %>
                                    <span class="tag tag-success-outline">助理</span>
                                    <% } %>
                                    <span class="tag tag-primary">总经理</span>
                                </div>
                            </td>
                            <td>
                                <div class="table-cell">
                                    <button class="btn-link">邀请</button>
                                    <button class="btn-link">删除</button>
                                </div>
                            </td>
                        </tr>
                        <% } %>
                    </tbody>
                </table>
                <table class="table table-bordered">
                    <caption>带边框的表格表头</caption>
                    <thead>
                        <tr>
                            <th>序号</th>
                            <th>姓名</th>
                            <th>地址</th>
                            <th>标签</th>
                        </tr>
                    </thead>
                    <tbody>
                        <% for (let i = 0; i < 5; i++) { %>
                        <tr>
                            <th scope="row">
                                <div class="table-cell">
                                    <%= i + 1 %>
                                </div>
                            </th>
                            <td>
                                <div class="table-cell">姓名
                                    <%= i + 1 %>
                                </div>
                            </td>
                            <td>
                                <div class="table-cell">上海市浦东新区小区
                                    <%= i + 1 %>
                                </div>
                            </td>
                            <td>
                                <div class="table-cell">
                                    <% if (i == 0) { %>
                                    <span class="tag tag-success">董事长</span>
                                    <% } else if (i == 1) { %>
                                    <span class="tag tag-success-outline">助理</span>
                                    <% } %>
                                    <span class="tag tag-primary">总经理</span>
                                </div>
                            </td>
                        </tr>
                        <% } %>
                    </tbody>
                </table>
            </div>
            <h3 class="site-title">2. 响应式表格<a href="#responsive">#</a></h3>
            <div class="site-info">
                <div class="table-responsive">
                    <table class="table" style="width: 1000px;">
                        <caption>响应式表格表头</caption>
                        <colgroup>
                            <col width="100px">
                            <col width="200px">
                            <col width="100px">
                            <col>
                        </colgroup>
                        <thead>
                            <tr>
                                <th>序号</th>
                                <th>姓名</th>
                                <th>年龄</th>
                                <th>地址</th>
                            </tr>
                        </thead>
                        <tbody>
                            <% for (let i = 0; i < 5; i++) { %>
                            <tr>
                                <th scope="row">
                                    <div class="table-cell">
                                        <%= i + 1 %>
                                    </div>
                                </th>
                                <td>
                                    <div class="table-cell">姓名
                                        <%= i + 1 %>
                                    </div>
                                </td>
                                <td>
                                    <div class="table-cell">2
                                        <%= i + 1 %>
                                    </div>
                                </td>
                                <td>
                                    <div class="table-cell">上海市浦东新区小区
                                        <%= i + 1 %>
                                    </div>
                                </td>
                            </tr>
                            <% } %>
                        </tbody>
                    </table>
                </div>
            </div>
            <h3 class="site-title">3. 数据表格<a href="#data">#</a></h3>
            <div class="site-info">
                ...
            </div>
        </div>
    </div>
    <script type="text/javascript" src="../../scripts/vendor.js"></script>
    <script type="text/javascript" src="../../scripts/site.js"></script>
</body>

</html>